<template>
  <div>
    <div>
      <!--  <h1>施工单位</h1> -->

      <div class="container">
        <div class="containerTop">
          <el-form :inline="true">
            <div class="commontop">
              <div class="commontop-left">
                <el-select
                  clearable
                  class="elSect"
                  v-model="iDS.search_type"
                  placeholder="请选择要搜索内容"
                  prefix-icon="el-icon-search"
                >
                  <el-option
                    v-for="item in optionsTitle"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-input
                  placeholder="输入关键字进行搜索"
                  v-model="iDS.keyword"
                  @change="INput"
                  @clear="INput"
                  @keyup.enter.native="goSearch()"
                  clearable
                  prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                  class="searchbgc"
                  @click="goSearch"
                  icon="iconfont icon-sousuo2"
                  >搜索</el-button
                >
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="不选中则默认全选"
                  placement="top"
                >
                  <el-button @click="Submission" icon="iconfont icon-jieyuejilu"
                    >借阅审批</el-button
                  >
                </el-tooltip>
                <el-button @click="goBorrowin()" icon="iconfont icon-jieyuejilu"
                  >借阅记录</el-button
                >
                <el-button
                  @click="goTemperature()"
                  icon="iconfont icon-wenshidujiancejilu"
                  >温湿度检测记录</el-button
                >
              </div>
            </div>
          </el-form>
        </div>

        <el-table
          class="table"
          v-loading="isLoading"
          :data="tableData"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          border
          :header-cell-style="{
            backgroundColor: '#3963fd',
            color: '#fff',
            'text-align': 'center',
          }"
          style="width: 100%; margin-top: 20px"
        >
          <template slot="empty">
            <img
              src="@/assets/imgs/暂未数据.png"
              alt
              style="margin-top: 104px"
            />
            <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
          </template>
          <el-table-column type="selection" width="35"></el-table-column>
          <el-table-column type="number" width="60" label="序号">
            <template slot-scope="scope">
              <a
                @click="goInvolume(scope.row)"
                style="color: blue; cursor: pointer"
                >{{ scope.row.number }}
              </a>
            </template>
          </el-table-column>
          <el-table-column
            width="220"
            prop="archives_no"
            label="档案号"
            align="center"
          >
          </el-table-column>
          <el-table-column align="left" prop="title" label="案卷题名">
          </el-table-column>
          <el-table-column
            width="60"
            prop="base_map"
            label="底图"
            align="center"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="60"
            prop="blueprint"
            label="蓝图"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="60"
            prop="page_num"
            label="页册"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="60"
            prop="page_num"
            label="张数"
          >
          </el-table-column>
          <el-table-column
            width="60"
            align="center"
            prop="years"
            label="案卷所属年代"
          >
          </el-table-column>
          <el-table-column
            width="90"
            align="center"
            prop="store_period"
            label="保管期限"
          >
          </el-table-column>
          <el-table-column
            width="80"
            align="center"
            prop="secret_level"
            label="机密程度"
          >
          </el-table-column>
          <el-table-column width="60" align="center" prop="remark" label="备注">
          </el-table-column>
          <el-table-column
            width="60"
            align="center"
            prop="cabin_no"
            label="柜号"
          >
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-sizes="pageSizeArr"
            :page-size="iDS.per_page"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonInfo from "@/utils/common";
import {
  BookTitles,
  submitBorrows,
  getBooktitles,
} from "../../../../api/Template/index";
import CommonDawer from "../../../../components/common/commonTab.vue";
export default {
  components: {
    CommonDawer,
  },
  watch: {},
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",
      /* 表格数据 */
      tableData: [],
      optionsTitle: [
        { id: "1", title: "案卷题名" },
        { id: "2", title: "档案号" },
      ],
      iDS: {
        part_company_id: "",
        search_type: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        keyword: "",
        per_page: 10,
        page: 1,
      },
      //暂存案卷目录
      id: "",
      //页数
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      /* 当前页 */
      current_page: 1,
      /* 总条数 */
      total: 0,
      /* 输入建议框的建议数组 */
      restaurants: [],
      /* 提交错误的输入框的绑定值 */
      state1: "",
      /* 加载页面 */
      isLoading: false,
      /* 提交借阅审批 */
      Submissionfrom: {
        project_id: "",
        part_company_id: "",
        project_classify_id: "",
        type: "1",
        ids: "",
        select_all: "",
      },

      /* 表单宽度 */
      formLabelWidth: "120px",
    };
  },

  methods: {
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;

      //console.log(this.multipleSelection);
    },
    //搜索
    async goSearch() {
      this.froms.page = 1;
      this.froms.per_page = 10;
      this.current_page = 1;
      console.log(this.froms);
      if (this.iDS.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      this.iDS.part_company_id = this.$route.query.companyId;
      let res = await getBooktitles(this.iDS);
      console.log(res, "123");
      this.tableData = res.data.data.data;
    },

    //跳转到借阅记录
    goBorrowin() {
      this.$router.push({
        path: "/project/template-item/retrieval/borrowing",
        /* query: {
          type: ,
        }, */
      });
    },
    //跳转到温湿度检测记录
    goTemperature() {
      this.$router.push({
        path: "/project/template-item/retrieval/temperature",
        /* query: {
          type: ,
        }, */
      });
    },
    /* 获取表格数据 */
    async loadData(num) {
      this.iDS.part_company_id = this.$route.query.companyId;

      let res = await getBooktitles(this.iDS);
      console.log(res, "111");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
    },
    /* 表格搜索 */
    INput() {
      if (this.froms.keyword == "") {
        this.loadData(this.iDS);
      }
    },
    //搜索
    /*  async goSearch() {
      console.log(this.froms);
      if (this.froms.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      this.froms.part_company_id = this.$route.query.companyId;
      let res = await bookTitles(this.froms);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;

      this.current_page = res.data.data.current_page;
    }, */
    /* 提交案卷 */
    async Submission() {
      // 显示loading
      this.$loading();
      this.Submissionfrom.project_id = this.$route.query.project_id;
      this.Submissionfrom.part_company_id = this.$route.query.companyId;
      this.Submissionfrom.project_classify_id =
        sessionStorage.getItem("clickTd");

      if (this.multipleSelection == null) {
        this.Submissionfrom.select_all = "1";
        this.Submissionfrom.ids = [];
      } else {
        this.Submissionfrom.select_all = "0";
        let arr = this.multipleSelection.map((item) => item.id);
        this.Submissionfrom.ids = arr;
      }
      console.log(this.Submissionfrom);
      let res = await submitBorrows(this.Submissionfrom);
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "success",
        });
        this.$loading().close();
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
        this.$loading().close();
      }
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.iDS.page = val;
      this.loadData(this.iDS);
    },
    //分页
    handleSizeChange(val) {
      this.iDS.per_page = val;
      this.loadData(this.iDS);
    },
    //跳转到卷内目录
    goInvolume(row) {
      console.log(row);
      sessionStorage.setItem("title", row.title);
      /*  sessionStorage.setItem("classtitle", row.project_classify_id); */
      this.$router.push({
        path: "/project/template-item/filing/construction/SearchVolume",
        query: {
          template_id: this.$route.query.template_id,
          companyId: this.$route.query.companyId,
        },
      });
    },

    /* 多选输入框返回输入建议的方法 */
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      -(
        // 调用 callback 返回建议列表的数据
        cb(results)
      );
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    /* 输入建议框提供的建议 */
    loadAll() {
      return [
        { id: "1", value: "案卷题名重复" },
        { id: "2", value: "页号错误" },
        { id: "3", value: "日期错误" },
        { id: "4", value: "底图错误" },
        { id: "5", value: "档案号错误" },
        { id: "6", value: "页册错误" },
      ];
    },
    /* 输入建议框选中的值 */
    handleSelect(item) {
      console.log(item);
    },
  },

  created() {
    this.restaurants = this.loadAll();
    this.loadData();
  },
};
</script>

<style scoped lang="less">
.top {
  margin: 10px 0;
}
.container {
  display: flex;
  flex-direction: column;
  .containerTop {
    margin: 10px 0;
  }
}
/deep/.el-table__header {
  margin-bottom: 20px;
  line-height: 40px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.table .el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
  margin-left: 5px;
}
.tab {
  /deep/
    .el-form-item.is-required:not(.is-no-asterisk)
    > .el-form-item__label:before {
    display: none;
  }

  /deep/ .el-input {
    float: left;
    margin-right: 20px;
  }

  /deep/ .el-form-item__content {
    height: 32px;
  }

  .login-btn {
    margin-top: 80px;
    margin-left: 60px;
    display: flex;
    justify-content: space-around;
  }

  .login-btn button {
    width: 30%;
    height: 36px;
    margin-bottom: 10px;
  }
}
.IPBT {
  .el-input {
    width: 72%;
  }
}

/deep/.el-radio-button__inner {
  padding: 7px 7px;
}
.login-btn {
  display: flex;
  justify-content: space-around;
}
/* /deep/.el-table .el-table__cell.is-center {
  text-align: center;
} */
.el-date-editor--daterange.el-input__inner {
  width: 316px;
}
/deep/.el-table .cell {
  padding-left: 5px;
  padding-right: 5px;
}
/deep/.el-table .el-table__cell {
  padding: 2px 0px;
}
.InputTit {
  width: 97%;
}
.InputTits {
  width: 200px;
}
.table {
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    font-size: 14px;
  }
}
/deep/.el-input__suffix {
  right: 10px;
}
/deep/.el-input--suffix .el-input__inner {
  padding-right: 14px;
}
/deep/.el-input__inner {
  padding: 0 8px;
}
/deep/.commontop-left .el-input__inner {
  padding: 0 30px;
}
/deep/.table[data-v-37ab2b9a] .el-input--mini .el-input__inner {
  height: 40px;
  font-size: 12px;
}
.el-table td.el-table__cell div {
  width: 100%;
}
.inline-input {
  width: 85%;
}
/deep/.el-textarea__inner {
  padding: 2px 2px;
  font-size: 14px;
}
.commontop .el-input {
  width: 20%;
  background-color: #fff;
}
/deep/.commontop-left .elSect .el-input {
  width: 100%;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>